<template>
    <div style="width: 100%">
        <el-header style="width: 100%;position: fixed;padding: 0;z-index: 999">
            <div style="display:flex;border-bottom: solid 1px #e6e6e6;justify-content:space-around;height: 60px;background-color: #ffffff;">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-popover
                            placement="bottom"
                            trigger="hover">
                        <div style="width: 100px;height: 150px">
                            <img src="../../assets/280280.jpg" style="width: 150px;height: 150px">
                        </div>
                       <a href="/" slot="reference">
                            <img src="../../assets/280280.jpg" style="width: 45px;height: 45px;">
                        </a>
                    </el-popover>
                </div>
                <div>
                    <el-menu
                            :default-active="defaultActive"
                            style="border-bottom:none;flex-grow: 1;flex-shrink: 0;overflow-x: auto;align-items: stretch;display: flex;padding: 0;"
                            mode="horizontal">
                        <el-menu-item @click="toCategory(item.name)" :index="item.name" v-for="(item,index) in navList" :key="index">{{item.cateName}}</el-menu-item>
                    </el-menu>
                </div>
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-input
                            closable
                            @keydown.enter.native="toSearchByKeyword"
                            size="small"
                            placeholder="请输入内容搜索..."
                            prefix-icon="el-icon-search"
                            v-model="keyword">
                    </el-input>
                </div>
            </div></el-header>
        <div style="width: 100%;height: 60px"></div>
        <div class="my-divider">
            <el-divider content-position="left">一瓶奶博客</el-divider>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        data(){
            return{
                defaultActive : '/home',
                keyword : '',
                navList : [],
            }
        },
        methods : {
            toSearchByKeyword(){
                this.$router.push({path:'/index/home',query:{keyword:this.keyword}});
            },
            toCategory(cname){
                if(cname === 'home'){
                    this.$router.push('/');
                    return
                }
              this.$router.push(`/index/${cname}`);
            },
            init(){
                //先看看session有没有
                let categorys = JSON.parse(window.sessionStorage.getItem("categories"));
                if( categorys != null){
                    this.navList = categorys;
                    return;
                }
                //获取菜单
                this.getRequest('/blog/category/').then(resp => {
                    if(resp){
                        this.navList = resp;
                        window.sessionStorage.setItem("categories",JSON.stringify(resp));
                    }
                }).catch(err => {
                    this.$Message.error('加载数据失败!' + err);
                });
            }
        },
        created() {
            window.sessionStorage.removeItem("categories");
            this.init();
        },
        mounted() {
            if(this.$route.path == '/index/home' || this.$route.path == '/index'){
                this.defaultActive = 'home';
            }else{
                let path = this.$route.path;
                let temp = path.split('/');
                this.defaultActive = temp[temp.length - 1];
            }
        },
        watch : {
            $route: {
                //处理激活菜单
                handler: function () {
                    if(this.$route.path == '/index/home' || this.$route.path == '/index'){
                        this.defaultActive = 'home';
                    }else{
                        let path = this.$route.path;
                        let temp = path.split('/');
                        this.defaultActive = temp[temp.length - 1];
                    }
                },
            }
        }
    }
</script>

<style>
    el-header{
        padding: 0;
    }
    .el-menu-item{
        min-height: 60px;
    }
/*ul li{*/
/*    min-height: 60px;*/
/*}*/
    .my-divider .divider{
        margin: 0px;
    }
</style>